<script setup>
import axios from "axios";
import { ref, onMounted, reactive } from "vue";

// 定义employees 类型
let employees = ref([]);

onMounted(() => {
  getData();
});
const submit = () => {
  // sb 你连后端给你的列表都不对
  getData();
};
function clear() {
  searchForm = { job: "", name: "", gender: "" };
  getData();
}
function getData() {
  axios
    .get("http://web-server.itheima.net/emps/list", {
      params: { ...searchForm },
    })
    .then((result) => {
      // axios从后台请求到的数据，如果请求到数据的状态为200，则将请求到的数据赋值给employees
      if (result.status == 200) {
        employees.value = result.data.data;
      }
    });
}
const formLabelWidth = "100px";
// 这是搜索的表单
let searchForm = reactive({
  job: "",
  name: "",
  gender: "",
});
</script>

<template>
  <div id="center" :inline="true">
    <el-form :inline="true" :model="searchForm" style="width: 1200px">
      <el-form-item label="姓名">
        <el-input v-model="searchForm.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="性别" style="width: 200px">
        <el-select v-model="searchForm.gender" placeholder="请选择">
          <el-option label="男" value="1" />
          <el-option label="女" value="2" />
          <el-option label="其他" value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="职位" style="width: 200px">
        <el-select v-model="searchForm.job" placeholder="请选择">
          <el-option label="讲师" value="1" />
          <el-option label="班主任" value="2" />
          <el-option label="其他" value="3" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button @click="clear">清空</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div>
    <el-table :data="employees" border style="width: 80%">
      <el-table-column prop="id" label="序号"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="image" label="头像">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <img :src="scope.row.image" alt="" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="gender" label="性别">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <p v-if="scope.row.gender == 1">男</p>
            <p v-if="scope.row.gender == 2">女</p>
            <p v-if="scope.row.gender == 3">其他</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="job" label="职位">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <p v-if="scope.row.job == 1">班主任</p>
            <p v-if="scope.row.job == 2">讲师</p>
            <p v-if="scope.row.job == 3">其他</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="entrydate" label="入职时间"> </el-table-column>
      <el-table-column prop="updatetime" label="更新时间"> </el-table-column>
    </el-table>
  </div>

  <!-- <table id="btnGet">
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>头像</th>
      <th>性别</th>
      <th>职位</th>
      <th>入职时间</th>
      <th>更新时间</th>
    </tr> -->

  <!-- v-for 用于列表循环渲染元素 -->
  <!-- <tr>
      <td>1</td>
      <td>Tom</td>
      <td>
        <img
          src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/4.jpg"
        />
      </td>
      <td>
        <span>男</span>
        <span>女</span>
        <span>其他</span>
      </td>
      <td>
        <span>班主任</span>
        <span>讲师</span>
        <span>其他</span>
      </td>
      <td>2020-01-01</td>
      <td>2023-10-29 00:00:00</td>
    </tr>
    <tr v-for="(employee, index) in userList" :key="index">
      <td>{{ index + 1 }}</td>
      <td>{{ employee.name }}</td>
      <td><img :src="employee.image" /></td>
      <td>
        <span v-if="employee.gender == 1" name="gender">男</span>
        <span v-if="employee.gender == 2" name="gender">女</span>
        <span v-if="employee.gender == 3" name="gender">其他</span>
      </td>
      <td>
        <span v-if="employee.job == 1" name="job">班主任</span>
        <span v-if="employee.job == 2" name="job">讲师</span>
        <span v-if="employee.job == 3" name="job">其他</span>
      </td>
      <td>{{ employee.entrydate }}</td>
      <td>{{ employee.updateDate }}</td>
    </tr>
  </table> -->
</template>

<style scoped>
table,
th,
td {
  border: 1px solid #000;
  border-collapse: collapse;
  line-height: 50px;
  text-align: center;
}

#center,
table {
  width: 60%;
  margin: auto;
}

#center {
  margin-bottom: 20px;
}

img {
  width: 50px;
}

input,
select {
  width: 17%;
  padding: 10px;
  margin-right: 30px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.btn {
  background-color: #ccc;
}
</style>
